<template>
  <div id="form-demo">
    <div class="widget-container">
      <DxForm
        id="form"
        :form-data="company"
        :label-mode="labelMode"
        :read-only="readOnly"
        :show-colon-after-label="showColon"
        :label-location="labelLocation"
        :min-col-width="minColWidth"
        :col-count="colCount"
        :width="width"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import DxForm, { type DxFormTypes } from 'devextreme-vue/form';


const labelModes: DxFormTypes.FormLabelMode[] = ['outside', 'static', 'floating', 'hidden'];
const labelLocations: DxFormTypes.LabelLocation[] = ['left', 'top'];
const companies = [{
  ID: 1,
  Name: 'Super Mart of the West',
  Address: '702 SW 8th Street',
  City: 'Bentonville',
  State: 'Arkansas',
  ZipCode: 72716,
  Phone: '(800) 555-2797',
  Fax: '(800) 555-2171',
  Website: '',
  Active: true,
}, {
  ID: 2,
  Name: 'Electronics Depot',
  Address: '2455 Paces Ferry Road NW',
  City: 'Atlanta',
  State: 'Georgia',
  ZipCode: 30339,
  Phone: '(800) 595-3232',
  Fax: '(800) 595-3231',
  Website: '',
  Active: true,
}, {
  ID: 3,
  Name: 'K&S Music',
  Address: '1000 Nicllet Mall',
  City: 'Minneapolis',
  State: 'Minnesota',
  ZipCode: 55403,
  Phone: '(612) 304-6073',
  Fax: '(612) 304-6074',
  Website: '',
  Active: true,
}, {
  ID: 4,
  Name: "Tom's Club",
  Address: '999 Lake Drive',
  City: 'Issaquah',
  State: 'Washington',
  ZipCode: 98027,
  Phone: '(800) 955-2292',
  Fax: '(800) 955-2293',
  Website: '',
  Active: true,
}];
const labelMode = ref(labelModes[2]);
const labelLocation = ref(labelLocations[0]);
const readOnly = ref(false);
const showColon = ref(true);
const minColWidth = ref(500);
const colCount = ref(4);
const companyName = ref(companies[0].Name);
const width = ref('100%');

const company = computed(() => companies.find(({ Name }) => Name === companyName.value));

</script>
<style scoped>
.widget-container {
  width:100%;
  min-width: 300px;
}

</style>